<template>
  <div class="topbar">
        <div class="top">
            <div class="left" @click="opendialog">
                <span>学生</span>
                <span>|</span>
                <span>教职工</span>
                <span>|</span>
                <span>校友</span>
                <span>|</span>
                <span>访客</span>
                <span>|</span>
                <span>招聘</span>
                <span>|</span>
                <span>捐赠</span>
            </div>
            <div class="right" @click="opendialog">
                <span>门户</span>
                <span>网络</span>
                <span>邮箱</span>
                <span>燕云直播</span>
                <span>图书馆</span>
                <span>医学部</span>
                <span>领导信箱</span>
            </div>
        </div>
        <div class="nav">
            <router-link to="/home">首页</router-link>
            <router-link to="/sumary">北大概况</router-link>
            <router-link to="/news">北大要闻</router-link>
            <router-link to="/parts">学部与院系</router-link>
        </div>
  </div>
</template>
<script>
export default {
    methods:{
        opendialog(){
            alert('暂未开放')
        }
    }
};
</script>
<style scoped>
.top{
    background: #94070a;
    color: #d39797;
    justify-content: space-between;
    display: flex;
    padding: .5em 1em;
    cursor: pointer;
}
.top span:hover{
    font-weight: bold;
}
.nav {
    background: white;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 1.2em;
}
.nav a {
    margin-left: 3em;
}
.nav a:hover{
    border-bottom: 4px solid #94070a;
}
</style>